<template>
  <div class="select-area">
    <el-select
      v-model="computedValue"
      placeholder="请选择"
      clearable
      filterable
      value-key="code"
      v-bind="$attrs"
    >
      <el-option
        v-for="item in options"
        :key="item.code"
        :label="item.name"
        :value="item"
      />
    </el-select>
  </div>
</template>
<script setup lang='ts'>
import { type AreaOptionInter } from './area.type'
const props =defineProps({
  modelValue: {
    type: Object as () => AreaOptionInter | null,
    default: null
  },
  options: {
    type: Array as () => AreaOptionInter[],
    default: () => {
      return []
    }
  }
})

const emit = defineEmits(['update:modelValue'])
const computedValue = computed({
  get: () => {
    return props.modelValue
  },
  set: (val: AreaOptionInter | null) => {
    // props.modelValue = val
    emit('update:modelValue', val)
  }
})
</script>
<style lang='scss'>
.select-area {
  margin-bottom: 4px;
}  
</style>